<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能管家欢迎页面演示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f172a 100%);
            color: white;
            min-height: 100vh;
            overflow-x: hidden;
        }

        .container {
            min-height: 100vh;
            display: flex;
            position: relative;
        }

        /* 动态背景粒子 */
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }

        .particle {
            position: absolute;
            background: rgba(0, 245, 255, 0.3);
            border-radius: 50%;
            animation: float 15s infinite linear;
        }

        /* 左侧机器人区域 */
        .robot-section {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 10;
        }

        .robot-container {
            text-align: center;
        }

        /* 智能机器人 */
        .intelligent-robot {
            position: relative;
            margin-bottom: 40px;
        }

        .robot-body {
            width: 240px;
            height: 240px;
            margin: 0 auto 20px;
            position: relative;
        }

        .outer-ring {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: conic-gradient(from 0deg, #00f5ff, #0ea5e9, #8b5cf6, #00f5ff);
            animation: rotate 8s linear infinite;
            opacity: 0.4;
        }

        .middle-ring {
            position: absolute;
            inset: 20px;
            border-radius: 50%;
            background: linear-gradient(45deg, #8b5cf6, #ec4899, #f59e0b, #8b5cf6);
            animation: rotate 6s linear infinite reverse;
            opacity: 0.5;
        }

        .robot-main {
            position: absolute;
            inset: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #00f5ff, #0ea5e9);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 
                0 0 40px rgba(0, 245, 255, 0.6),
                inset 0 0 30px rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }

        .robot-face {
            font-size: 5rem;
            position: relative;
            transition: all 0.3s ease;
            filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
        }

        .robot-name {
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(0, 245, 255, 0.4);
            border-radius: 30px;
            padding: 12px 24px;
            display: inline-block;
            margin-bottom: 20px;
        }

        .name-text {
            color: #00f5ff;
            font-weight: bold;
            font-size: 1.2rem;
            margin-bottom: 4px;
            display: block;
        }

        .status-text {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
        }

        /* 欢迎文字 */
        .welcome-text {
            margin-bottom: 30px;
        }

        .welcome-title {
            font-size: 3rem;
            font-weight: bold;
            color: white;
            margin-bottom: 16px;
            animation: fadeInUp 1s ease-out;
        }

        .welcome-subtitle {
            font-size: 1.3rem;
            color: #00f5ff;
            animation: fadeInUp 1s ease-out 0.3s both;
        }

        /* 按钮 */
        .action-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
        }

        .btn {
            padding: 12px 30px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            position: relative;
            overflow: hidden;
        }

        .btn-primary {
            background: linear-gradient(135deg, #00f5ff, #0ea5e9);
            color: white;
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 245, 255, 0.3);
        }

        /* 右侧推荐区域 */
        .recommendations-section {
            width: 400px;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(20px);
            border-left: 1px solid rgba(0, 245, 255, 0.2);
            padding: 40px 30px;
            position: relative;
            z-index: 10;
        }

        .recommendations-header {
            margin-bottom: 30px;
        }

        .recommendations-title {
            font-size: 1.8rem;
            font-weight: bold;
            color: white;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }

        .recommendations-subtitle {
            color: rgba(255, 255, 255, 0.7);
            font-size: 1rem;
        }

        /* 用户画像 */
        .user-profile {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(0, 245, 255, 0.2);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 30px;
        }

        .profile-title {
            color: white;
            font-weight: 600;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .profile-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            font-size: 0.9rem;
        }

        .profile-item {
            color: rgba(255, 255, 255, 0.8);
        }

        .profile-label {
            color: #00f5ff;
            margin-right: 4px;
        }

        /* 智能标签 */
        .smart-tags {
            flex: 1;
        }

        .tags-header {
            color: white;
            font-weight: 600;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .tags-list {
            space-y: 12px;
            max-height: 400px;
            overflow-y: auto;
        }

        .tag-item {
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid transparent;
            border-radius: 12px;
            padding: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 12px;
            position: relative;
        }

        .tag-item:hover {
            transform: translateY(-2px);
            border-color: rgba(0, 245, 255, 0.5);
            background: rgba(0, 245, 255, 0.1);
        }

        .tag-item.high-priority {
            border-color: rgba(239, 68, 68, 0.5);
            background: rgba(239, 68, 68, 0.1);
        }

        .tag-item.medium-priority {
            border-color: rgba(245, 158, 11, 0.5);
            background: rgba(245, 158, 11, 0.1);
        }

        .tag-content {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .tag-icon {
            font-size: 1.8rem;
            flex-shrink: 0;
        }

        .tag-info {
            flex: 1;
        }

        .tag-title {
            color: white;
            font-weight: 600;
            margin-bottom: 4px;
            font-size: 1rem;
        }

        .tag-description {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.85rem;
            margin-bottom: 8px;
        }

        .tag-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .priority-badge {
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 0.7rem;
            font-weight: 600;
        }

        .priority-high {
            background: rgba(239, 68, 68, 0.2);
            color: #fca5a5;
        }

        .priority-medium {
            background: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
        }

        .priority-normal {
            background: rgba(16, 185, 129, 0.2);
            color: #6ee7b7;
        }

        .match-score {
            color: #00f5ff;
            font-size: 0.8rem;
            font-weight: 600;
        }

        /* 语音波纹效果 */
        .voice-waves {
            position: absolute;
            bottom: -60px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: end;
            gap: 4px;
            height: 40px;
        }

        .wave-bar {
            width: 4px;
            background: linear-gradient(to top, #00f5ff, #0ea5e9);
            border-radius: 2px;
            animation: wave 0.8s ease-in-out infinite alternate;
        }

        /* 动画关键帧 */
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes float {
            0% { transform: translateY(0px) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes wave {
            from { height: 15px; }
            to { height: 35px; }
        }

        @keyframes speaking {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); box-shadow: 0 0 50px rgba(0, 245, 255, 0.8); }
        }

        @keyframes thinking {
            0%, 100% { transform: scale(1) rotate(0deg); }
            25% { transform: scale(1.02) rotate(-1deg); }
            75% { transform: scale(1.02) rotate(1deg); }
        }

        /* 状态指示器 */
        .status-indicator {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #10b981;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.1); }
        }

        /* 响应式 */
        @media (max-width: 1024px) {
            .container {
                flex-direction: column;
            }
            
            .recommendations-section {
                width: 100%;
                border-left: none;
                border-top: 1px solid rgba(0, 245, 255, 0.2);
            }

            .robot-body {
                width: 200px;
                height: 200px;
            }

            .robot-face {
                font-size: 4rem;
            }

            .welcome-title {
                font-size: 2.2rem;
            }
        }

        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(0, 245, 255, 0.5);
            border-radius: 3px;
        }

        /* 特殊状态 */
        .robot-speaking .robot-main {
            animation: speaking 1s ease-in-out infinite;
        }

        .robot-thinking .robot-main {
            animation: thinking 2s ease-in-out infinite;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 动态背景粒子 -->
        <div class="particles" id="particles"></div>

        <!-- 左侧机器人欢迎区域 -->
        <div class="robot-section">
            <div class="robot-container">
                <!-- 智能机器人 -->
                <div class="intelligent-robot" id="robot">
                    <div class="robot-body">
                        <div class="outer-ring"></div>
                        <div class="middle-ring"></div>
                        <div class="robot-main">
                            <div class="robot-face" id="robotFace">🤖</div>
                        </div>
                        <div class="status-indicator"></div>
                    </div>
                    
                    <div class="robot-name">
                        <span class="name-text">小旦智能管家</span>
                        <span class="status-text" id="statusText">在线服务</span>
                    </div>

                    <!-- 语音波纹效果 -->
                    <div class="voice-waves" id="voiceWaves" style="display: none;">
                        <div class="wave-bar" style="animation-delay: 0s;"></div>
                        <div class="wave-bar" style="animation-delay: 0.1s;"></div>
                        <div class="wave-bar" style="animation-delay: 0.2s;"></div>
                        <div class="wave-bar" style="animation-delay: 0.3s;"></div>
                        <div class="wave-bar" style="animation-delay: 0.4s;"></div>
                    </div>
                </div>

                <!-- 欢迎文字 -->
                <div class="welcome-text">
                    <h1 class="welcome-title" id="welcomeTitle">欢迎来到智能税务大模型平台！</h1>
                    <p class="welcome-subtitle" id="welcomeSubtitle">我是小旦，您的专属智能管家</p>
                </div>

                <!-- 操作按钮 -->
                <div class="action-buttons">
                    <button class="btn btn-primary" onclick="startConversation()">开始对话</button>
                    <button class="btn btn-secondary" onclick="skipWelcome()">直接进入</button>
                </div>
            </div>
        </div>

        <!-- 右侧智能推荐区域 -->
        <div class="recommendations-section">
            <!-- 标题 -->
            <div class="recommendations-header">
                <h2 class="recommendations-title">
                    ✨ 智能推荐
                </h2>
                <p class="recommendations-subtitle">基于您的需求智能匹配</p>
            </div>

            <!-- 用户画像 -->
            <div class="user-profile">
                <h3 class="profile-title">
                    👤 用户画像
                </h3>
                <div class="profile-grid">
                    <div class="profile-item">
                        <span class="profile-label">行业：</span>制造业
                    </div>
                    <div class="profile-item">
                        <span class="profile-label">规模：</span>中型企业
                    </div>
                    <div class="profile-item">
                        <span class="profile-label">地区：</span>华东地区
                    </div>
                    <div class="profile-item">
                        <span class="profile-label">关注：</span>税收优惠
                    </div>
                </div>
            </div>

            <!-- 智能标签推荐 -->
            <div class="smart-tags">
                <div class="tags-header">
                    <span>🎯 今日推荐 (5)</span>
                    <button onclick="refreshRecommendations()" style="background: none; border: none; color: #00f5ff; cursor: pointer; font-size: 0.9rem;">🔄 刷新</button>
                </div>

                <div class="tags-list">
                    <!-- 高优先级推荐 -->
                    <div class="tag-item high-priority" onclick="selectTag('cross-border-ecommerce')">
                        <div class="tag-content">
                            <div class="tag-icon">🎯</div>
                            <div class="tag-info">
                                <div class="tag-title">跨境电商税收政策</div>
                                <div class="tag-description">基于您的行业特征推荐</div>
                                <div class="tag-meta">
                                    <span class="priority-badge priority-high">紧急</span>
                                    <span class="match-score">匹配度: 95%</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 高优先级推荐 -->
                    <div class="tag-item high-priority" onclick="selectTag('digital-transformation')">
                        <div class="tag-content">
                            <div class="tag-icon">💰</div>
                            <div class="tag-info">
                                <div class="tag-title">制造业数字化补贴</div>
                                <div class="tag-description">符合您企业规模的优惠政策</div>
                                <div class="tag-meta">
                                    <span class="priority-badge priority-high">推荐</span>
                                    <span class="match-score">匹配度: 88%</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 中等优先级推荐 -->
                    <div class="tag-item medium-priority" onclick="selectTag('small-enterprise')">
                        <div class="tag-content">
                            <div class="tag-icon">🏢</div>
                            <div class="tag-info">
                                <div class="tag-title">小微企业扶持政策</div>
                                <div class="tag-description">最新优惠政策汇总</div>
                                <div class="tag-meta">
                                    <span class="priority-badge priority-medium">关注</span>
                                    <span class="match-score">匹配度: 82%</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 普通推荐 -->
                    <div class="tag-item" onclick="selectTag('ai-consultation')">
                        <div class="tag-content">
                            <div class="tag-icon">📊</div>
                            <div class="tag-info">
                                <div class="tag-title">AI智能咨询</div>
                                <div class="tag-description">专业政策问题解答</div>
                                <div class="tag-meta">
                                    <span class="priority-badge priority-normal">推荐</span>
                                    <span class="match-score">匹配度: 76%</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 普通推荐 -->
                    <div class="tag-item" onclick="selectTag('talent-policy')">
                        <div class="tag-content">
                            <div class="tag-icon">🎓</div>
                            <div class="tag-info">
                                <div class="tag-title">博士后政策专区</div>
                                <div class="tag-description">人才引进相关政策</div>
                                <div class="tag-meta">
                                    <span class="priority-badge priority-normal">可选</span>
                                    <span class="match-score">匹配度: 65%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 机器人状态管理
        let robotState = {
            isThinking: false,
            isSpeaking: false,
            isExcited: false
        }

        // 欢迎文字内容
        const welcomeMessages = [
            {
                title: '欢迎来到智能税务大模型平台！',
                subtitle: '我是小旦，您的专属智能管家'
            },
            {
                title: '让我为您提供个性化服务',
                subtitle: '基于大模型的智能政策分析与推荐系统'
            },
            {
                title: '准备好开始您的智能之旅了吗？',
                subtitle: '点击右侧标签开始探索您关心的内容'
            }
        ]

        let currentMessageIndex = 0

        // 初始化粒子效果
        function initParticles() {
            const particlesContainer = document.getElementById('particles')
            
            for (let i = 0; i < 50; i++) {
                const particle = document.createElement('div')
                particle.className = 'particle'
                
                const size = Math.random() * 4 + 2
                const duration = Math.random() * 15 + 10
                const delay = Math.random() * 5
                
                particle.style.width = `${size}px`
                particle.style.height = `${size}px`
                particle.style.left = `${Math.random() * 100}%`
                particle.style.animationDuration = `${duration}s`
                particle.style.animationDelay = `${delay}s`
                
                particlesContainer.appendChild(particle)
            }
        }

        // 机器人动画控制
        function setRobotState(state) {
            const robot = document.getElementById('robot')
            const robotFace = document.getElementById('robotFace')
            const statusText = document.getElementById('statusText')
            const voiceWaves = document.getElementById('voiceWaves')

            // 清除所有状态
            robot.classList.remove('robot-speaking', 'robot-thinking')
            voiceWaves.style.display = 'none'

            if (state === 'thinking') {
                robot.classList.add('robot-thinking')
                robotFace.textContent = '🤔'
                statusText.textContent = '思考中...'
                robotState.isThinking = true
                robotState.isSpeaking = false
            } else if (state === 'speaking') {
                robot.classList.add('robot-speaking')
                robotFace.textContent = '😊'
                statusText.textContent = '播报中...'
                voiceWaves.style.display = 'flex'
                robotState.isSpeaking = true
                robotState.isThinking = false
            } else if (state === 'excited') {
                robotFace.textContent = '😄'
                statusText.textContent = '激动中!'
                robotState.isExcited = true
            } else {
                robotFace.textContent = '🤖'
                statusText.textContent = '在线服务'
                robotState = { isThinking: false, isSpeaking: false, isExcited: false }
            }
        }

        // 欢迎文字轮播
        function rotateWelcomeMessage() {
            setRobotState('thinking')
            
            setTimeout(() => {
                const welcomeTitle = document.getElementById('welcomeTitle')
                const welcomeSubtitle = document.getElementById('welcomeSubtitle')
                
                const message = welcomeMessages[currentMessageIndex]
                welcomeTitle.textContent = message.title
                welcomeSubtitle.textContent = message.subtitle
                
                currentMessageIndex = (currentMessageIndex + 1) % welcomeMessages.length
                
                setRobotState('speaking')
                
                setTimeout(() => {
                    setRobotState('normal')
                }, 2000)
            }, 1000)
        }

        // 开始对话
        function startConversation() {
            setRobotState('excited')
            
            setTimeout(() => {
                alert('正在跳转到AI智能咨询页面...')
                // 这里可以添加路由跳转逻辑
                // window.location.href = '/ai-chat'
            }, 1000)
        }

        // 跳过欢迎
        function skipWelcome() {
            alert('正在进入主界面...')
            // window.location.href = '/dashboard'
        }

        // 选择标签
        function selectTag(tagType) {
            setRobotState('thinking')
            
            const tagNames = {
                'cross-border-ecommerce': '跨境电商税收政策',
                'digital-transformation': '制造业数字化补贴',
                'small-enterprise': '小微企业扶持政策',
                'ai-consultation': 'AI智能咨询',
                'talent-policy': '博士后政策专区'
            }
            
            setTimeout(() => {
                setRobotState('speaking')
                alert(`正在进入${tagNames[tagType]}模块...`)
                
                setTimeout(() => {
                    setRobotState('normal')
                }, 2000)
            }, 1500)
        }

        // 刷新推荐
        function refreshRecommendations() {
            setRobotState('thinking')
            
            setTimeout(() => {
                // 随机调整匹配度
                const matchScores = document.querySelectorAll('.match-score')
                matchScores.forEach(score => {
                    const currentMatch = parseInt(score.textContent.match(/\d+/)[0])
                    const newMatch = Math.max(60, Math.min(98, currentMatch + (Math.random() - 0.5) * 20))
                    score.textContent = `匹配度: ${Math.round(newMatch)}%`
                })
                
                setRobotState('excited')
                
                setTimeout(() => {
                    setRobotState('normal')
                }, 2000)
            }, 2000)
        }

        // 页面初始化
        window.onload = function() {
            initParticles()
            
            // 延迟启动欢迎动画
            setTimeout(() => {
                setRobotState('speaking')
                
                setTimeout(() => {
                    setRobotState('normal')
                }, 3000)
            }, 1000)
            
            // 定期轮播欢迎消息
            setInterval(rotateWelcomeMessage, 8000)
            
            // 随机机器人表情变化
            setInterval(() => {
                if (!robotState.isThinking && !robotState.isSpeaking && Math.random() > 0.9) {
                    setRobotState('excited')
                    setTimeout(() => {
                        setRobotState('normal')
                    }, 2000)
                }
            }, 10000)
        }
    </script>
</body>
</html> 